/**
 * @file _axiom-time-sheet.scss
 * @description AxiomTimeSheet 移动端时间选择弹窗组件样式
 */
@use '../../../styles/variables' as *;
@use './axiom-base-sheet';

.axiom-time-sheet {
  @extend .axiom-base-sheet;

  .content {
    @extend .axiom-base-sheet__content;
  }

  .quick-options {
    @extend .axiom-base-sheet__quick-options;
  }
  
  .custom-time-section {
    margin-top: var(--axiom-spacing-lg, 16px);
    padding: var(--axiom-spacing-xl, 20px);
    background: var(--bg-color-tertiary);
    border-radius: var(--axiom-border-radius-large, 12px);
    border: 1px solid var(--border-color);
    backdrop-filter: blur(var(--backdrop-blur, 10px));
    
    .section-title {
      margin-bottom: var(--axiom-spacing-lg, 16px);
      
      .axiom-text {
        font-size: var(--axiom-font-size-md, 15px);
        font-weight: var(--axiom-font-weight-semibold, 600);
        color: var(--text-color);
      }
    }
    
    .time-inputs {
      @extend .sheet-time-inputs;
      
      // 时间选择器弹出面板样式
      :deep(.el-time-panel) {
        background: var(--bg-color);
        border: 1px solid var(--border-color);
        border-radius: var(--axiom-border-radius-large, 12px);
        backdrop-filter: blur(var(--backdrop-blur, 20px));
        box-shadow: var(--axiom-time-sheet-panel-shadow);
        
        .el-time-panel__content {
          background: transparent;
          
          .el-time-spinner__list {
            &::-webkit-scrollbar {
              width: var(--axiom-scrollbar-width-thin, 4px);
            }
            
            &::-webkit-scrollbar-thumb {
              background: var(--primary-color);
              border-radius: var(--axiom-scrollbar-thumb-border-radius, 2px);
            }
            
            .el-time-spinner__item {
              color: var(--text-color);
              
              &:hover {
                background: var(--primary-color-light);
              }
              
              &.is-active {
                color: var(--primary-color);
                font-weight: var(--axiom-font-weight-semibold, 600);
              }
            }
          }
        }
      }
    }
  }
  
  .options-list {
    @extend .axiom-base-sheet__options-list;
  }

  .option-item {
    flex-direction: column;
    align-items: flex-start;
    position: relative;
    
    .option-label {
      width: 100%;
      margin-bottom: var(--axiom-spacing-xs, 4px);
      
      .axiom-text {
        font-size: var(--axiom-font-size-md, 15px);
        font-weight: var(--axiom-font-weight-medium, 500);
        transition: color var(--axiom-transition-duration-base) ease;
      }
    }
    
    .option-description {
      width: 100%;
      margin-bottom: var(--axiom-spacing-sm, 8px);
      
      .axiom-text {
        font-size: var(--axiom-font-size-sm, 13px);
        color: var(--text-color-light);
        line-height: 1.4;
      }
    }
    
    .checkmark {
      position: absolute;
      top: var(--axiom-time-sheet-checkmark-top, 16px);
      right: var(--axiom-time-sheet-checkmark-right, 20px);
      color: var(--primary-color);
      font-size: var(--axiom-time-sheet-checkmark-size, 18px);
      transition: all var(--axiom-transition-duration-base) ease;
    }
    
    &.selected {
      .option-description .axiom-text {
        color: var(--primary-color-light);
      }
      
      .checkmark {
        animation: checkmarkBounce 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
      }
    }
    
    // 为特定时间选项添加图标装饰
    &[data-time="now"] .option-label .axiom-text:before,
    &[data-time="09:00"] .option-label .axiom-text:before,
    &[data-time="12:00"] .option-label .axiom-text:before,
    &[data-time="18:00"] .option-label .axiom-text:before,
    &[data-time="21:00"] .option-label .axiom-text:before,
    &[data-time="00:00"] .option-label .axiom-text:before {
      margin-right: var(--axiom-spacing-xs, 4px);
    }

    &[data-time="now"] .option-label .axiom-text:before { content: '🕐 '; }
    &[data-time="09:00"] .option-label .axiom-text:before { content: '🌅 '; }
    &[data-time="12:00"] .option-label .axiom-text:before { content: '🍽️ '; }
    &[data-time="18:00"] .option-label .axiom-text:before { content: '🌆 '; }
    &[data-time="21:00"] .option-label .axiom-text:before { content: '🌙 '; }
    &[data-time="00:00"] .option-label .axiom-text:before { content: '🌃 '; }
  }

  .footer {
    @extend .axiom-base-sheet__footer;

    .actions {
      @extend .axiom-base-sheet__footer-actions;
    }
  }
} 